import React from 'react'
import {Col, Row} from "antd";

import {WeaLocaleProvider,WeaInput,WeaCheckbox,WeaInputNumber} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

export default class AddExtends extends React.Component{

    componentWillMount(){
        const {setSetting,setId} = this.props
        if(setId == -1){
            setSetting({
                showQrcode: true,
                qrcodeValidTime: 30,
                defaultQrcode: false,
                onlyQrcode : false,
                color: '#ffffff',
                e8LoginButtonColor:'rgb(87, 129, 151)'
            })
        }else{
            setSetting({'addVisiable':true})
        }
    }

    render(){
        const {setting,setSetting,componentType} = this.props
        const {showQrcode,qrcodeValidTime,defaultQrcode,onlyQrcode} = setting

        let content
        if(componentType=="e8Form"){
            content = null
        }else{
            content = (
                <div>
                    <div className="set-item">
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4rirw4`} type="flex" middle="middle">
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ml46mn`} span={6} >
                                <div className="item-title">{getLabel(387917,'显示二维码')} :</div>
                                <div className="middle-box"></div>
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ccipwa`} span={18}>
                                <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@spcdqg`} value={showQrcode} onChange={value => setSetting({showQrcode:value == '1'})}/>
                            </Col>
                        </Row>
                    </div>
                    {
                        showQrcode == true ? (
                            <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_undefined@eit6nb`}>
                                <div className="set-item">
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rv9pcl`} type="flex" middle="middle">
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@f6gu07`} span={6} >
                                            <div className="item-title">{getLabel(512584,'默认扫码登录')} :</div>
                                            <div className="middle-box"></div>
                                        </Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r4s00r`} span={18}>
                                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@548385`} value={defaultQrcode} onChange={value => {const isCheck = value == '1'; if (isCheck) {setSetting({defaultQrcode:isCheck})} else {setSetting({defaultQrcode:isCheck, onlyQrcode:isCheck})}}}/>
                                        </Col>
                                    </Row>
                                </div>
                                <div className="set-item">
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@tnf14v`} type="flex" middle="middle">
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4entt2`} span={6} >
                                            <div className="item-title">{getLabel(512585,'只允许扫码登录')} :</div>
                                            <div className="middle-box"></div>
                                        </Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3347o2`} span={18}>
                                            <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@ns5asg`} value={onlyQrcode} onChange={value => {const isCheck = value == '1'; if (isCheck) {setSetting({onlyQrcode:isCheck, defaultQrcode:isCheck})} else {setSetting({onlyQrcode:isCheck})}}}/>
                                        </Col>
                                    </Row>
                                </div>
                                <div className="set-item">
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@msl845`} type="flex" middle="middle">
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0cohq8`} span={6} >
                                            <div className="item-title">{getLabel(515971,'二维码有效时间（秒）')} :</div>
                                            <div className="middle-box"></div>
                                        </Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@t7cqwf`} span={18}>
                                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@ivzxbr`} style={{width:60}} min={0} value={qrcodeValidTime} onChange={value => setSetting({qrcodeValidTime:value})}/>
                                        </Col>
                                    </Row>
                                </div>
                            </React.Fragment>
                        ) : null
                    }

                </div>
            )
        }
        return content
    }
}